<template>
	<view v-if="showPage" class="">
		<view class="px-24 pt-24 fd-r jc-sb">
			<view
				class="tag"
				:class="{ tagA: delivery == '快递' }"
				@click="HTagChange('快递')"
			>
				<text class="c-white">快递</text>
			</view>
			<view class="w-24 h-24"></view>
			<view
				class="tag"
				:class="{ tagA: delivery == '自提' }"
				@click="HTagChange('自提')"
			>
				<text class="c-white">自提</text>
			</view>
		</view>

		<!-- 收货地址 -->
		<view
			v-if="delivery == '快递'"
			class="z-card p-24 fd-r"
			@click="PickAddress"
		>
			<view class="flex1 fd-c">
				<text class="mb-12">
					{{ address.name }} {{ address.phone }}
				</text>
				<text class="fs-24 c-grey">{{ address.ditail }}</text>
			</view>

			<tm-icon
				name="tmicon-angle-right"
				:fontSize="28"
				color="grey"
			></tm-icon>
		</view>

		<!-- 店铺分组 -->
		<block v-for="store in storeList" :key="store.tenantId">
			<view class="z-card px-24">
				<view class="fd-r py-16">
					<image class="w-40 h-40" :src="store.logo"></image>
					<text class="flex1 ml-16">{{ store.name }}</text>
				</view>
				<view class="divider"></view>

				<!-- 商品明细 -->
				<view
					class="py-16 fd-r ai-fs"
					v-for="item in store.skuList"
					:key="item.id"
				>
					<image class="w-160 h-180" :src="item.img"></image>

					<view class="flex1 pl-24 fd-c">
						<text class="mb-12">{{ item.name }}</text>
						<text class="fs-24 c-grey">
							{{ item.spec1 }} {{ item.spec2 }} *
							{{ item.quantity }}
						</text>
						<view class="fd-r jc-fe">
							<text class="fs-24 c-red">￥</text>
							<text class="c-red fw-b">{{ item.price }}</text>
						</view>
					</view>
				</view>

				<view class="divider"></view>

				<view class="py-24 fd-r">
					<text class="flex1">小计</text>
					<text class="fs-24 c-red">￥</text>
					<text class="c-red fw-b">{{ store.amount }}</text>
				</view>

				<view
					v-if="delivery == '自提'"
					class="py-24 fd-r"
					@click="HShowMap(store)"
				>
					<text class="mr-24">自提地址</text>
					<text class="flex1 fs-24 c-grey">{{ store.address }}</text>
					<tm-icon name="tmicon-position-fill" color="red"></tm-icon>
				</view>

				<!-- <block v-if="delivery == '自提'">
					<tm-time-picker
						:showDetail="{
							year: true,
							month: true,
							day: true,
							hour: true,
							minute: true,
							second: false
						}"
						v-model="store.selfPickupTime"
						format="MM-DD HH:mm"
						v-model:model-str="store.selfPickupTimeStr"
						:start="startTime"
						:end="EndTime"
						color="red"
					>
						<view class="py-24 fd-r fs-28">
							<text class="">自提时间</text>
							<text class="flex1 text-align-right c-grey">
								{{ store.selfPickupTimeStr || '请选择' }}
							</text>
						</view>
					</tm-time-picker>
				</block> -->
			</view>
		</block>

		<view class="z-foot bgc-white px-24 py-12 fd-r jc-sb">
			<view class="flex1 fd-r">
				<text class="c-grey">总计</text>
				<text class="fs-24 c-red">￥</text>
				<text class="c-red fw-b">{{ detail.amount }}</text>
			</view>
			<button class="btn-red w-240 h-72" @click="HPay">支付</button>
		</view>
	</view>

	<tm-skeleton v-else></tm-skeleton>
</template>

<script setup>
import { ref } from 'vue';

const delivery = ref('快递');
function HTagChange(type) {
	if (type == '自提') {
		const item = storeList.value.find((v) => v.selfPickup == false);
		if (item) {
			uni.showModal({
				title: '提示',
				content: '该订单中存在不支持自提的商品，将剔除',
				success: (res) => {
					if (res.confirm) {
						delivery.value = type;
						HGetPreview();
					}
				}
			});
		}
	} else {
		delivery.value = type;
		HGetPreview();
	}
}

import orderApi from '@/api/orderApi.js';
const showPage = ref(false);
// 时间范围
const startTime = ref(new Date().getTime() + 1000 * 60 * 60);
const EndTime = ref(new Date().getTime() + 1000 * 60 * 60 * 24);
const detail = ref({});
const address = ref({});
const storeList = ref([]);
const HGetPreview = () => {
	const params = {
		delivery: delivery.value,
		goodList: goodList.value
	};
	orderApi.preview(params).then((res) => {
		detail.value = res.data;
		address.value = res.data.address;
		address.value.ditail =
			address.value.province +
			address.value.city +
			address.value.area +
			address.value.address;

		storeList.value = res.data.storeList.map((v) => {
			v.skuList = v.skuList.map((vv) => {
				return {
					...vv,
					...JSON.parse(vv.attributeJson)
				};
			});
			return v;
		});

		showPage.value = true;
	});
};

import { onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance } from 'vue';
// 分享者的id
const shareId = ref('');
const goodList = ref([]);
onLoad((option) => {
	if (option.shareId) {
		shareId.value = option.shareId;
	}
	const instance = getCurrentInstance().proxy;
	const eventChannel = instance.getOpenerEventChannel();

	eventChannel.on('to-order-add', (list) => {
		goodList.value = list;
		HGetPreview();
	});
});

const PickAddress = () => {
	uni.navigateTo({
		url: '/pages/zone1/address/list/index?select=true'
	});

	uni.$off('address-back');
	uni.$on('address-back', (res) => {
		address.value = res;
		address.value.ditail = res.province + res.city + res.area + res.address;
	});
};

function bMapTransQQMap(lng, lat) {
	let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
	let x = lng - 0.0065;
	let y = lat - 0.006;
	let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
	let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
	let lngs = z * Math.cos(theta);
	let lats = z * Math.sin(theta);

	return {
		lng: lngs,
		lat: lats
	};
}

function HShowMap(store) {
	const tran = bMapTransQQMap(store.longitude, store.latitude);
	uni.openLocation({
		latitude: tran.lat,
		longitude: tran.lng,
		name: store.name,
		address: store.address
	});
}

const HPay = () => {
	uni.showLoading({
		title: '创建订单'
	});

	const params = {
		storeList: storeList.value.map((v) => {
			return {
				tenantId: v.tenantId,
				skuList: v.skuList.map((vv) => {
					return {
						cartId: vv.cartId,
						skuId: vv.id,
						quantity: vv.quantity,
						shareId: shareId.value
					};
				})
			};
		})
	};

	if (delivery.value == '快递') {
		params.addressId = address.value.id;
	}

	orderApi
		.add(params)
		.then((res) => {
			uni.hideLoading();
			const obj = JSON.parse(res.data.prepayid);
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: obj.timeStamp,
				nonceStr: obj.nonceStr,
				package: obj.package,
				signType: obj.signType,
				paySign: obj.paySign,

				success: function (res) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});

					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/zone1/order/list/index?status=全部'
						});
					}, 1500);
				},
				fail: function (err) {
					console.log('HPay-err', err);
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});

					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/zone1/order/list/index?status=待支付'
						});
					}, 1500);
				}
			});
		})
		.catch(() => {
			uni.hideLoading();
		});
};
</script>

<style lang="scss" scoped>
.tag {
	flex: 1;
	padding: 16rpx;
	border-radius: 12rpx;
	background-color: $c-grey;
	text-align: center;
}
.tagA {
	background-color: $c-red;
}
</style>
